import { message } from "antd";
import { useEffect, useRef, useState } from "react";
import { $eventBus, $EventBus_off, $EventBus_on, $export_excel } from "../../../../../../common/utils";
import { $Http } from "../../../../../../network";
import HomePage_TableComponent from "../../../../component/table";
import HomePage_ModalComponent from "../../../../component/modal";
import HomePage_ModalComponent_SeeMainTransformerOrLineModalComponent from "../../../../component/modal/component/seeMainTransformerOrLineModalComponent";

// 主页-统计查询页面-主变台账析页面
const HomePage_StatisticalQueryPage_MainTransformerLedgerPage: React.FC = () => {
  const [sourceData, setSourceData] = useState<object>({})
  const initParamsData = useRef<object>({})
  const paramsData = useRef<object>({})
  let [pageNo, setPageNo] = useState<number>(1)
  let [pageSize, setPageSize] = useState<number>(10)
  const [isModal, setIsModal] = useState<boolean>(false)
  const [modalData, setModalData] = useState<object>({})
  const columnList = [
    {
      title: '序号',
      width: 60,
      render: (text: string, record: object, idx: number) => idx + 1,
    },
    {
      title: '巡维中心',
      minWidth: 85,
      dataIndex: 'maintainCentre',
      render: (text: string) => text ?? "-" },
    {
      title: '安装站点',
      minWidth: 85,
      dataIndex: 'stationName',
      render: (text: string) => text ?? "-" },
    {
      title: '监测主变',
      minWidth: 85,
      dataIndex: 'monitorMainName',
      rowScope: 'row',
      render: (text: string) => text ?? "-"  
    },
    {
      title: '监测装置',
      minWidth: 85,
      dataIndex: 'monitorDevice',
      render: (text: string) => text ?? "-" },
    {
      title: '通信地址',
      minWidth: 85,
      dataIndex: 'address',
      render: (text: string) => text ?? "-" }, {
      title: '预警值（一级、二级）',
      children: [
        {
          title: (
            <>
              <span>直流电流</span>
              <br />
              <span>DC(A)</span>
            </>
          ),
          minWidth: 85,
          align: "right",
          render: (text: string, record: object) => <span>{record["dcCur"]?.["one"] ?? "-"}{!record["dcCur"]?.["one"] && !record["dcCur"]?.["two"] ? " " : "、"}{record["dcCur"]?.["two"] ?? "-"}</span>,
        },
        {
          title: (
            <>
              <span>交流电流</span>
              <br />
              <span>AC(A)</span>
            </>
          ),
          minWidth: 85,
          align: "right",
          render: (text: string, record: object) => <span>{record["acCur"]?.["one"] ?? "-"}{!record["acCur"]?.["one"] && !record["acCur"]?.["two"] ? " " : "、"}{record["acCur"]?.["two"] ?? "-"}</span>,
        },
        {
          title: (
            <>
              <span>变压器振动</span>
              <br />
              <span>VA(mm/s)</span>
            </>
          ),
          minWidth: 100,
          align: "right",
          render: (text: string, record: object) => <span>{record["transVibrate"]?.["one"] ?? "-"}{!record["transVibrate"]?.["one"] && !record["transVibrate"]?.["two"] ? " " : "、"}{record["transVibrate"]?.["two"] ?? "-"}</span>,
        },
        {
          title: (
            <>
              <span>变压器噪声</span>
              <br />
              <span>NI(dB)</span>
            </>
          ),
          minWidth: 120,
          align: "right",
          render: (text: string, record: object) => <span>{record["transNoise"]?.["one"] ?? "-"}{!record["transNoise"]?.["one"] && !record["transNoise"]?.["two"] ? " " : "、"}{record["transNoise"]?.["two"] ?? "-"}</span>,
        },
      ]
    },
    {
      title: '操作',
      align: "right",
      width: 60,
      render: (text: string, record: object, idx: number) => <span className="homePage-tableOperationBtn" onClick={() => click_operation(record)}>查看</span>
    },

  ];

  const click_operation = (data: object) => {
    setIsModal(true)
    setModalData({ type: "主变", ...data })
  }
  const http_search = () => {
    $Http("search", { typeName: "数据维护/主变维护", ...paramsData.current, pageNo, pageSize }).then((res) => {
      setSourceData({ ...res["data"] })
    })
  }

  const change_pagination = (no: number, size: number) => {
    pageNo = no
    pageSize = size
    setPageNo(pageNo)
    setPageSize(pageSize)
    http_search()
  }

  const change_export = (list: Array<number>) => {
    $export_excel("统计查询/主变台账", list)
  }

  // 广播函数数据
  const eventBusFuncData = {
    // 头部操作初始参数
    headerOperationInitParamsData: (data: object) => {
      initParamsData.current = data["data"]["initParamsData"]
      paramsData.current = data["data"]["initParamsData"]
      http_search()
    },
    // 头部操作查询
    headerOperationSearch: (data: object) => {
      pageNo = 1
      setPageNo(pageNo)
      paramsData.current = { ...paramsData.current, ...data["data"]["paramsData"] }
      http_search()
    },
    // 头部操作条件的开关
    headerOperationConditionSwitch: (data: object) => {
      pageNo = 1
      setPageNo(pageNo)
      paramsData.current = { ...initParamsData.current }
      http_search()
    },
  }


  useEffect(() => {
    $EventBus_on(eventBusFuncData)
    return () => {
      $EventBus_off(eventBusFuncData)
    }
  }, [])

  return (
    <>
      <HomePage_TableComponent name="homePageStatisticalQueryPageMainTransformerLedgerPageTable" columnList={columnList} isRowSelection
        highlightList={["监测主变"]}
        smallPaddingList={["预警值（一级、二级）"]}
        smallFontList={["预警值（一级、二级）"]}
        borderRightList={["通信地址"]}
        borderBottomList={["预警值（一级、二级）"]}
        alignCenterList={["主变类型"]}
        alignRightList={["操作"]}
        fixedList={["操作"]}
        pageNo={pageNo} pageSize={pageSize} sourceData={sourceData} change_pagination={change_pagination} change_selectedRowList={change_export} />
      {
        isModal && <HomePage_ModalComponent width={640} change_cancel={setIsModal} contentComponent={<HomePage_ModalComponent_SeeMainTransformerOrLineModalComponent sourceData={modalData} change_cancel={setIsModal} />
        }
        />
      }
    </>
  )
}

export default HomePage_StatisticalQueryPage_MainTransformerLedgerPage